<template>
    <div class="layout">
        <Layout>
            <Header :style="'height: 50px;background-color:'+bgColor">
                <Menu mode="horizontal" :theme="theme" active-name="1" style="height: 50px">
                    <div class="layout-logo"></div>
                    <div class="layout-fold" @click="foldClick">
                        <!-- 展开关闭左侧树 -->
                        <Icon type="ios-apps-outline" :style="'color:' +(this.bgColor == 'white' ? '#515a6e':'')"/>
                    </div>
                    <div class="layout-nav">
                        <MenuItem name="1">
                            <span @click="screen">
                                <Icon type="md-expand" v-if="isFullscreen"/>
                                <Icon type="ios-expand" v-else/> 全屏
                            </span>
                        </MenuItem>
                        <MenuItem name="2">
                            <span @click="setting">
                               <Icon type="ios-settings-outline"/>系统设置
                            </span>
                        </MenuItem>
                        <MenuItem name="3">
                            <span>
                                <Avatar size="default" :src="'data:image/jpeg;base64,' + user.avatar"/>
                                <Poptip word-wrap width="250" style="margin-left: 5px">
                                    {{user.realName}}
                                    <div slot="content">
                                       <table class="my-t" style="color: #212121;line-height: 30px">
                                            <tbody>
                                                <tr>
                                                    <td class="t-left">头像:</td>
                                                    <td class="t-right">
                                                        <Avatar :src="'data:image/jpeg;base64,'+user.avatar"/>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="t-left">姓名:</td>
                                                      <td class="t-right">{{user.realName}}</td>
                                                </tr>
                                                <tr>
                                                    <td class="t-left">用户名:</td>
                                                    <td class="t-right">{{user.username}}</td>
                                                </tr>
                                                <tr>
                                                    <td class="t-left">编号:</td>
                                                     <td class="t-right">{{user.userCode}}</td>
                                                </tr>
                                                <tr>
                                                    <td class="t-left">性别:</td>
                                                    <td class="t-right">{{user.sex=='1'?'男':'女'}}</td>
                                                </tr>
                                                <tr>
                                                    <td class="t-left">电话:</td>
                                                      <td class="t-right">{{user.phone}}</td>
                                                </tr>
                                                <tr>
                                                    <td class="t-left">邮箱:</td>
                                                    <td class="t-right">{{user.email}}</td>
                                                </tr>
                                                <tr>
                                                    <td class="t-left">状态:</td>
                                                    <td class="t-right">{{user.status == '0' ? '禁用' : '启用'}}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </Poptip>
                            </span>
                        </MenuItem>
                        <MenuItem name="4">
                            <span @click="logout">退出登陆</span>
                        </MenuItem>
                    </div>
                </Menu>
            </Header>
            <Layout>
                <Sider :style="'background-color:'+bgColor" :width="leftWidth">
                    <LeftMenu ref="leftMenu" :theme="theme"></LeftMenu>
                </Sider>
                <Content>
                    <Breadcrumb style="margin: 10px;">
                        <BreadcrumbItem>首页</BreadcrumbItem>
                        <BreadcrumbItem>待办</BreadcrumbItem>
                    </Breadcrumb>
                    <div :style="'margin: 10px;height:'+(height-151)+'px;position: relative;'">
                        <keep-alive>
                            <router-view v-if="$route.meta.keepAlive"></router-view>
                            <Spin size="large" fix v-if="spinShow"></Spin>
                        </keep-alive>
                        <router-view v-if="!$route.meta.keepAlive"></router-view>
                    </div>
                </Content>
            </Layout>
            <Footer style="background-color: #676a6c;height: 50px;text-align: center;color: white">
                Copyright ©2022,All Rights Resvered 豫ICP备2021030532号-1
            </Footer>
        </Layout>

        <Modal v-model="showSettingModal" footer-hide
               title="系统设置" width="250"
               @on-cancel="showSettingModal=false">
            皮肤：
            <RadioGroup v-model="theme" type="button" @on-change="onChange">
                <Radio label="light">
                    <Icon type="ios-sunny-outline"/>
                    <span>Light</span>
                </Radio>
                <Radio label="dark">
                    <Icon type="md-sunny"/>
                    <span>Dark</span>
                </Radio>
            </RadioGroup>
        </Modal>
    </div>
</template>
<script>
    import screenfull from 'screenfull'
    import {mapState, mapGetters, mapActions, mapMutations} from 'vuex'; // 引入vuex
    import LeftMenu from './components/LeftMenu' // 左侧树

    export default {
        name: "Home",
        data() {
            return {
                height: "",
                isFullscreen: false,
                user: {},
                showSettingModal: false,
                theme: localStorage.getItem("theme") ? localStorage.getItem("theme") : "dark",
                bgColor: localStorage.getItem("bgColor") ? localStorage.getItem("bgColor") : "#515a6e",
                leftWidth: localStorage.getItem("menuWidth") ? localStorage.getItem("menuWidth") : 200
            };
        },
        components: {
            LeftMenu
        },
        computed: {
            ...mapState("system", ["breadcrumb", "spinShow"])
        },
        created() {
            this.user = JSON.parse(localStorage.getItem("user"))
        },
        methods: {
            ...mapMutations("system", ["setBreadcrumb", "setSpinShow"]),
            screen() {
                // 如果不允许进入全屏，发出不允许提示
                if (!screenfull.enabled) {
                    this.$layer.msg("您的浏览器不能全屏", {icon: 1, time: 3});
                    return false;
                }
                screenfull.toggle();
                this.isFullscreen = !this.isFullscreen;
            },
            logout() {
                this.$router.push('/login')
            },
            onSelectMenu(name) {
                this.setSpinShow(true);
                this.$router.push({path: name})
                setTimeout(() => {
                    this.setSpinShow(false);
                }, 250);
            },
            setting() {
                this.showSettingModal = true;
            },
            onChange(e) {
                this.theme = e
                if (e == "dark") {
                    this.bgColor = '#515a6e'
                    localStorage.setItem("theme", "dark")
                    localStorage.setItem("bgColor", "#515a6e")
                } else {
                    this.bgColor = 'white'
                    localStorage.setItem("theme", "light")
                    localStorage.setItem("bgColor", "white")
                }
                // 修改左侧树皮肤
                this.$refs.leftMenu.changeSkin();
            },
            foldClick() {
                this.$refs.leftMenu.openOrClose();
                this.leftWidth = localStorage.getItem("menuWidth");
            }
        },
        mounted() {
            this.height = document.documentElement.clientHeight; // 初始化页面高度
            window.addEventListener('resize', () => {
                return (() => {
                    this.height = document.documentElement.clientHeight;
                })();
            }, false)
        },
    }
</script>
<style scoped>
    .layout-logo {
        width: 200px;
        height: 50px;
        background-image: url('../assets/image/logo.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        -moz-background-size: 100% 100%;
        float: left;
        position: relative;
        left: -50px;
    }

    .layout-fold {
        float: left;
        position: relative;
        color: white;
        font-size: 20px;
        left: -40px;
    }

    .layout-nav {
        width: 420px;
        margin-left: auto;
        height: 50px;
    }

    .t-left {
        text-align: right;
        border: 1px dotted #a8aeb2;
        width: 100px;
        background-color: aliceblue;
    }

    .t-right {
        text-align: left;
        padding-left: 10px;
        width: 150px;
        border: 1px dotted #a8aeb2;
    }
</style>
